import flyImgPage from '@/components/flyImg/index.vue'
// 创建组件方法
const createFlyImg = (component, props) => {
    // 组件构造函数
    const Ctor = Vue.extend(component)
    // 创建组件实例
    const comp = new Ctor({ propsData: props })
    // console.log('comp', comp);
    // console.log(comp.$el);      // undefined
    // 如果不挂载，就不会转化为转化为真实dom
    // comp.$mount("#app") 就会直接挂载
    comp.$mount()
    // console.log(comp.$el); // 拿到了真实dom
    // 挂载到body上，插入到最前面
    document.body.insertBefore(comp.$el, document.body.firstChild)

    comp.close = () => {
        if(!comp.$el) return
        document.body.removeChild(comp.$el)
        comp.$destroy()
    }

    comp.$on('closed', (data) => {
        if(!comp.$el) return
        document.body.removeChild(comp.$el)
        comp.$destroy()  
    })

    return comp
}


// 飞出图片预览
const flyImg = (el,config={}) => {
    if(!el){
        if(typeof el === 'string'){
            el = document.querySelector(el)
            if(!el) return
        }
        return
    }
    return createFlyImg(flyImgPage,{
        el,
        ...config
    })
}

export {
    flyImg
}
